import Router from "next/router";
import { Component } from "react";
import { connect } from "react-redux";
import { searchName, commonChangeWay } from "../../store/actions";
import SearchResult from '../Search/Result';
import { SearchBar, Button, Toast, Icon } from "antd-mobile";
import { imgBase, logoUrl } from "@/utils/index";
import { IProps, IState } from "./type"
import pkIcon from '@/img/pk_icon.png'
import pkBtn from '@/img/pk-start-btn.png'
import styles from "./pk.module.scss";

class PK extends Component<IProps, IState> {
  twoSearch: any;
  oneSearch: any;
  constructor(props) {
    super(props);
    this.state = {
      value1: "",
      value2: "",
      onFocusTypePk: false,
      onFocusTypeT: false
    };
  }
  componentDidMount() {
    const { commonChangeWay } = this.props;
    commonChangeWay({
      pkInputOne: undefined,
      pkInputTwo: undefined
    });
  }
  searchGo(str: string, type?: number) {
    const { searchName, pkInputTwo, pkInputOne } = this.props;
    if (type === 2) {
      if (pkInputOne === undefined) {
        searchName({
          str,
          showCount: 5,
          isServer: false
        });
      } else {
        // 处理文旅集团
        let data = {
          str,
          showCount: 5,
          isServer: false,
          searchType: pkInputOne.searchType,
          indexType: pkInputOne.theIndex
        }
        if (Number(pkInputOne.theIndex) === 1109) {
          data.indexType = pkInputOne.theIndex;
        }
        searchName(data);
      }
    } else {
      if (pkInputTwo === undefined) {
        searchName({
          str,
          showCount: 5,
          isServer: false
        });
      } else {
        // 处理文旅集团
        let data = {
          str,
          showCount: 5,
          isServer: false,
          searchType: pkInputTwo.searchType,
          indexType: pkInputTwo.theIndex
        }
        if (Number(pkInputTwo.theIndex) === 1109) {
          data.indexType = pkInputTwo.theIndex;
        }
        searchName(data);
      }
    }
  }
  clear(type?: number) {
    const { commonChangeWay } = this.props;
    if (type === 2) {
      commonChangeWay({
        pkInputTwo: undefined
      });
    } else {
      commonChangeWay({
        pkInputOne: undefined
      });
    }
  }
  handlCancel(type?: number) {
    const { commonChangeWay } = this.props;
    if (type === 2) {
      this.setState({
        onFocusTypeT: !this.state.onFocusTypeT
      });
      this.twoSearch.state.value = "";
      commonChangeWay({
        pkInputTwo: undefined
      });
    } else {
      this.setState({
        onFocusTypePk: !this.state.onFocusTypePk
      });
      this.oneSearch.state.value = "";
      commonChangeWay({
        pkInputOne: undefined
      });
    }
    this.props.commonChangeWay({
      searchType: false
    });
  }
  handlFocusBlur(type?: number) {
    if (type === 2) {
      this.setState({
        onFocusTypeT: true
      });
    } else {
      this.setState({
        onFocusTypePk: true
      });
    }
    this.props.commonChangeWay({
      searchType: true,
      scrollTop: window.pageYOffset,
      searchData: []
    });
    window.scrollTo(0, 0);
  }
  andPkName(obj, inputType?: number) {
    const { commonChangeWay } = this.props;
    if (inputType === 2) {
      commonChangeWay({
        pkInputTwo: {
          id: obj.id,
          searchType: obj.type,
          name: obj.name,
          theIndex: obj.theIndex,
          logoUrl: logoUrl + obj.logoUrl,
          monitorCategoryId: obj.monitorCategoryId
        }
      });
      this.setState({
        value2: obj.name,
        onFocusTypeT: !this.state.onFocusTypeT
      });
      this.twoSearch.state.value = obj.name;
    } else {
      commonChangeWay({
        pkInputOne: {
          id: obj.id,
          searchType: obj.type,
          name: obj.name,
          theIndex: obj.theIndex,
          logoUrl: logoUrl + obj.logoUrl,
          monitorCategoryId: obj.monitorCategoryId
        }
      });
      this.setState({
        value1: obj.name,
        onFocusTypePk: !this.state.onFocusTypePk
      });
      this.oneSearch.state.value = obj.name;
    }
    commonChangeWay({
      searchType: false
    });
  }
  startPk() {
    const { pkInputTwo, pkInputOne } = this.props;
    if (pkInputTwo === undefined || pkInputOne === undefined) {
      Toast.info("请输入品牌/单店");
    } else {
      Toast.loading("PK中，请稍等...", 0);
      
      Router.push({
        pathname: Number(pkInputOne.theIndex) === 1109 ? "/tourismpk" : "/pk",
        query: {
          id: `${pkInputOne.id},${pkInputTwo.id}`,
          theIndex: pkInputOne.theIndex,
          searchType: pkInputOne.searchType,
          type: pkInputOne.monitorCategoryId
        }
      });
    }
  }
  render() {
    const { onFocusTypePk, onFocusTypeT, value1, value2 } = this.state;
    let { searchData, mbiType } = this.props;
    if (searchData === null || searchData === undefined) {
      searchData = [];
    }
    return (
      <section className={styles["pk-box"]}>
        <div className={styles["pk-icon"]}>
          <img src={pkIcon.src} />
        </div>
        <div className={styles["pk-title"]}> 品牌 / 单店PK </div>
        <div className={styles["pk"]}>
          {/* <div className='search-active-pk'> */}
          <div className={onFocusTypePk ? styles["search-active-pk"] : styles["pk-company"]}>
            <SearchBar
              placeholder="请输入品牌/酒店名称"
              ref={ref => (this.oneSearch = ref)}
              onSubmit={value => this.searchGo(value)}
              onClear={() => this.clear()}
              onFocus={() => this.handlFocusBlur()}
              // onChange={(val) => { console.log(val);}}
              // onBlur={() => this.handlFocusBlur()}
              onCancel={() => this.handlCancel()}
            />
            <div className={styles["search-res-box"]}>
              <SearchResult 
                searchData={searchData} 
                mbiType={mbiType} 
                goDetailed={(item) => this.andPkName(item)}
              />
            </div>
          </div>
          <div className={styles["vs-img"]}>
            <img src={`${imgBase}/vs.png`} />
          </div>
          <div className={onFocusTypeT ? styles["search-active-pk"] : styles["pk-company"]}>
            <SearchBar
              placeholder="请输入品牌/酒店名称"
              ref={ref => (this.twoSearch = ref)}
              onSubmit={value => this.searchGo(value, 2)}
              onClear={() => this.clear(2)}
              onFocus={() => this.handlFocusBlur(2)}
              // onBlur={() => this.handlFocusBlur(2)}
              onCancel={() => this.handlCancel(2)}
              // onChange={this.onChange}
            />
            <div className={styles["search-res-box"]}>
              <SearchResult 
                searchData={searchData} 
                mbiType={mbiType} 
                goDetailed={(item, inputType = 2) => this.andPkName(item, inputType)}
              />
              {/* {searchData.map((item, index) => {
                return (
                  <Button
                    prefixCls="search-brand"
                    onClick={() => this.andPkName(item, 2)}
                    key={`search-two-${index}`}
                  >
                    <Icon type="search" size="xs" color="#bbb" />
                    <span> {item.name} </span>
                  </Button>
                );
              })} */}
            </div>
          </div>
        </div>
        <div className={styles["start-btn"]} onClick={() => this.startPk()}>
          <img src={`${pkBtn.src}`} />
        </div>
      </section>
    );
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    searchName: data => dispatch(searchName(data)),
    commonChangeWay: data => dispatch(commonChangeWay(data))
  };
};

const mapStateToProps = (state, ownProps) => {
  return {
    searchData: state.searchData,
    pkInputTwo: state.pkInputTwo,
    pkInputOne: state.pkInputOne,
    scrollTop: state.scrollTop,
    mbiType: state.mbiNavigation
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PK);
